<script lang="ts" defer async setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { forgotPwd, getCode } from '@/api/login'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const isVerify = ref(false)
const baseData = reactive({
  showCheckMachine: false,
  showCountDown: false,
  showPassWord: false,
  showcPassWord: false,
  secounds: 60,
  current: 0,
  registerForm: {
    email: '',
    phone: '',
    password: null,
    code: null,
    confirmPassword: null,
    source: null,
  },
})
const changType = (e: any) => {
  baseData.registerForm.email = ''
  baseData.current = e
}
const countDown = ref(null)
const sendCode = async () => {
  console.log('baseData', baseData.current)
  let res
  if (baseData.current == 1) {
    res = await getCode({
      email: baseData.registerForm.phone,
      type: 2,
    })
  }
  if (baseData.current == 0) {
    res = await getCode({
      email: baseData.registerForm.email,
      type: 1,
    })
  }
  // const res = await getCode({
  // 	email: baseData.registerForm.email,
  // 	type: 1
  // })
  if (res && res.code == 0) {
    baseData.showCountDown = true
    countDown.value?.start()
    uni.showToast({
      title: t('Verification Code Sent'),
      icon: 'none',
    })
  } else {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
  }
}
const pupMachine = () => {
  if (baseData.current == 0) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(baseData.registerForm.email)) {
      uni.showToast({
        title: t('Invalid Email Format'),
        icon: 'none',
      })
      return
    }
  } else {
    const phoneRegex = /^\+?[0-9\s-]{7,15}$/
    if (!phoneRegex.test(baseData.registerForm.phone)) {
      uni.showToast({
        title: t('Invalid Phone Format'),
        icon: 'none',
      })
      return
    }
  }
  baseData.showCheckMachine = true
  nextTick(() => {
    if (typeof turnstile !== 'undefined') {
      turnstile.ready(() => {
        turnstile.render('#example-container', {
          sitekey: '0x4AAAAAAAxrx9G1zhBbMhG-',
          callback: (token: any) => {
            // console.log(`Challenge Success ${token}`);
            //  token，
            baseData.showCheckMachine = false
            sendCode()
          },
        })
      })
    }
  })
}
const finishCountTime = () => {
  baseData.showCountDown = false
}
const goLogin = () => {
  window.top?.postMessage('/pages/login/index', window.location.origin)
  uni.navigateTo({
    url: '/pages/login/index',
  })
}

const bind = async () => {
  if (isVerify.value == false) {
    return uni.showToast({
      title: t('Human machine verification') + ' ' + t('error'),
      icon: 'none',
    })
  }
  if (baseData.current == 0) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(baseData.registerForm.email)) {
      uni.showToast({
        title: t('Invalid Email Format'),
        icon: 'none',
      })
      return
    }
  } else {
    const phoneRegex = /^\+?[0-9\s-]{7,15}$/
    if (!phoneRegex.test(baseData.registerForm.phone)) {
      uni.showToast({
        title: t('Invalid Phone Format'),
        icon: 'none',
      })
      return
    }
  }
  if (baseData.registerForm.password != baseData.registerForm.confirmPassword) {
    uni.showToast({
      title: t('Passwords Do Not Match'),
      icon: 'none',
    })
    return
  }
  if (!baseData.registerForm.password) {
    uni.showToast({
      title: t('Password Cannot Be Empty'),
      icon: 'none',
    })
    return
  }
  //   if (!baseData.registerForm.code) {
  //     uni.showToast({
  //       title: t('Please Enter Verification Code'),
  //       icon: 'none',
  //     })
  //     return
  //   }
  const res = await forgotPwd({
    email: baseData.current ? baseData.registerForm.phone : baseData.registerForm.email,
    password: baseData.registerForm.password,
    // code: baseData.registerForm.code,
    confirmPassword: baseData.registerForm.confirmPassword,
    source: baseData.registerForm.source, //id
  })
  if (res.code == 0) {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
    setTimeout(function () {
      goLogin()
    }, 1000)
  } else {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
  }
}
const Verification = async () => {
  nextTick(() => {
    if (typeof turnstile !== 'undefined') {
      turnstile.ready(() => {
        turnstile.render('#example-container', {
          sitekey: '0x4AAAAAAAxrx9G1zhBbMhG-',
          callback: (token: any) => {
            isVerify.value = true
          },
          'error-callback': (error: any) => {
            isVerify.value = false
          },
        })
      })
    }
  })
}
onMounted(() => {
  Verification()
  // 
  uni.setNavigationBarTitle({
    title: 'Taskflix!' + t('Earn money so easy') + '!', // 
  })
})
</script>

<template>
  <view id="login" style="background: #ffeee4">
    <view class="tops">
      <view class="ltext">
        <span style="font-size: 26px; font-weight: bold">{{ t('Hello') }}!</span>
        <span style="font-size: 0.8rem">{{ t('Welcome to the Taskflix') }}!</span>
      </view>
      <image src="../../static/login/login-bg.png" mode="widthFix" />
    </view>
    <view class="login-box">
      <view style="width: 100%; text-align: start">
        <!-- <span style="font-size: 36upx;font-weight: bold;color: #000;">Welcome back</span> -->
        <view style="font-size: 0.96rem; font-weight: bold; color: #000">{{ t('Find the password') }}</view>
        <view style="width: 180upx; height: 44upx; margin-top: 20upx">
          <up-subsection
            style="height: 100%"
            :list="['Email', 'Phone']"
            :current="baseData.current"
            inactiveColor="#FE8400"
            activeColor="#FE8400"
            mode="subsection"
            @change="changType"
          ></up-subsection>
        </view>
      </view>
      <view class="input-frame" style="margin-top: 40upx" v-show="baseData.current == 0">
        <up-input
          v-model="baseData.registerForm.email"
          type="text"
          class="account-input"
          prefixIcon="email-fill"
          :placeholder="t('Email')"
          fontSize="12"
          prefixIconStyle="font-size: 18px;color: #FE8400"
        ></up-input>
      </view>
      <view class="input-frame" style="margin-top: 40upx" v-show="baseData.current == 1">
        <up-input
          v-model="baseData.registerForm.phone"
          type="text"
          class="account-input"
          :placeholder="t('Phone Number')"
          fontSize="12"
        >
          <template #prefix>
            <view style="display: flex; flex-flow: row; align-items: center">
              <up-icon size="18" color="#FE8400" name="phone-fill"></up-icon>
              <span style="color: #fe8400; font-size: 0.8rem">+91</span>
            </view>
          </template>
        </up-input>
      </view>
      <!-- <view class="input-frame">
        <up-input
          v-model="baseData.registerForm.code"
          type="text"
          class="account-input"
          prefixIcon="grid"
          :placeholder="t('Verification')"
          fontSize="12"
          prefixIconStyle="font-size: 18px;color: #FE8400"
        >
          <template #suffix>
            <view style="padding-left: 10upx; border-left: #fe8400 1px solid; width: 16%">
              <view v-if="!baseData.showCountDown" @click="pupMachine" style="font-size: 0.8rem; color: #fe8400">
                {{ t('Get Code') }}
              </view>
              <view
                v-else
                style="display: flex; flex-flow: row; align-items: center; justify-content: center; color: #606266"
              >
                <up-count-down
                  ref="countDown"
                  :time="baseData.secounds * 1000"
                  format="ss"
                  @finish="finishCountTime"
                ></up-count-down
                >s
              </view>
            </view>
          </template>
        </up-input>
      </view> -->
      <view class="input-frame" v-show="!baseData.showPassWord">
        <up-input
          v-model="baseData.registerForm.password"
          type="password"
          class="account-input"
          prefixIcon="lock-fill"
          :placeholder="t('New Password')"
          fontSize="12"
          prefixIconStyle="font-size: 18px;color: #FE8400"
        >
          <template #suffix>
            <up-icon @click="baseData.showPassWord = true" size="18" color="#909399" name="eye-off"></up-icon>
          </template>
        </up-input>
      </view>
      <view class="input-frame" v-show="baseData.showPassWord">
        <up-input
          v-model="baseData.registerForm.password"
          type="text"
          class="account-input"
          prefixIcon="lock-fill"
          :placeholder="t('New Password')"
          fontSize="12"
          prefixIconStyle="font-size: 18px;color: #FE8400"
        >
          <template #suffix>
            <up-icon @click="baseData.showPassWord = false" size="18" color="#909399" name="eye-fill"></up-icon>
          </template>
        </up-input>
      </view>
      <view class="input-frame" v-show="!baseData.showcPassWord">
        <up-input
          v-model="baseData.registerForm.confirmPassword"
          type="password"
          class="account-input"
          prefixIcon="lock-fill"
          :placeholder="t('Confirm New Password')"
          fontSize="12"
          prefixIconStyle="font-size: 18px;color: #FE8400"
        >
          <template #suffix>
            <up-icon @click="baseData.showcPassWord = true" size="18" color="#909399" name="eye-off"></up-icon>
          </template>
        </up-input>
      </view>
      <view class="input-frame" v-show="baseData.showcPassWord">
        <up-input
          v-model="baseData.registerForm.confirmPassword"
          type="text"
          class="account-input"
          prefixIcon="lock-fill"
          :placeholder="t('Confirm New Password')"
          fontSize="12"
          prefixIconStyle="font-size: 18px;color: #FE8400"
        >
          <template #suffix>
            <up-icon @click="baseData.showcPassWord = false" size="18" color="#909399" name="eye-fill"></up-icon>
          </template>
        </up-input>
      </view>
      <view class="laglist">
        <view class="cf-turnstile" id="example-container" data-sitekey="0x4AAAAAAAxrx9G1zhBbMhG-"></view>
      </view>
      <button class="login-submit_button" size="large" type="button" @click="bind()">{{ t('Submit') }}</button>
    </view>
    <view class="bottoms">
      <view>
        {{ t('Already have an account') }}?<span @tap="goLogin()">{{ t('Login in') }}</span>
      </view>
    </view>
    <!-- <up-popup
      :show="baseData.showCheckMachine"
      :round="20"
      mode="center"
      @close="baseData.showCheckMachine = false"
      @open="baseData.showCheckMachine = true"
    >
      <view class="langus">
        <view style="width: 100%;text-align: center;font-size: 01rem;font-weight: bold;">
					{{ t('Human machine verification') }}
				</view>
        <view class="laglist">
          <view class="cf-turnstile" id="example-container" data-sitekey="0x4AAAAAAAxrx9G1zhBbMhG-"></view>
        </view>
      </view>
    </up-popup> -->
  </view>
</template>



<style lang="scss" scoped>
.u-input {
  height: 1.2rem !important;
  line-height: 1.2rem !important;

  .u-input__content__field-wrapper__field {
    height: 1rem !important;
    line-height: 1rem !important;
  }
}

.go-reg-box {
  margin-top: 20upx;

  text {
    color: #fe8400;
    font-size: 0.4rem;
  }
}

.tops {
  display: flex;
  flex-flow: row;
  width: 90%;
  padding: 5%;
  align-items: center;
  justify-content: space-between;
  margin-top: -80upx;

  .ltext {
    display: flex;
    flex-flow: column;
    justify-content: start;
  }

  image {
    width: 50%;
    position: relative;
    background: #ffeee4;
  }
}

#login {
  width: 100%;
  display: flex;
  flex-flow: column;
  height: 100vh;

  .login-box {
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    padding: 50upx 40upx 50upx;
    text-align: center;
    margin: 0 auto;
    position: relative;
    border-radius: 20upx;
    color: #cccccc;
    width: 80%;
    margin-top: -100upx;
    z-index: 1;

    .login-title {
      width: 400upx !important;
      margin-top: 60upx;
    }
  }

  .input-frame {
    width: 100%;
    height: 90upx;
    background: #f7f7f7;
    border-radius: 40upx;
    position: relative;
    margin-top: 10upx;

    .account-input {
      background: red;
      border: none;
      background-color: rgba(255, 88, 0, 0.25);
      backdrop-filter: blur(4px);
      border-radius: 40upx;
    }
  }

  .login-psw-box {
    margin-top: 20upx;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;

    checkbox {
      transform: scale(0.6);
    }

    .login-text-psw {
      color: #335ff2;
      display: flex;
      flex-flow: row;
      align-items: center;
    }
  }

  .login-submit_button {
    border-radius: 40upx;
    height: 2rem;
    line-height: 2rem;
    color: #fff;
    font-size: 26upx;
    text-align: center;
    background: linear-gradient(to right, #fe8400, #ff5800);
    box-shadow: 2px 3px 16px 0px rgba(254, 132, 0, 0.4);
    outline: none;
    margin-top: 40upx;
  }
}

.bottoms {
  width: 100%;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  margin-top: 40upx;

  span {
    color: #fe8400;
    font-size: 0.8rem;
    margin-left: 10px;
    cursor: pointer;
    border-bottom: 2px solid #fe8400;
  }
}

.langus {
  width: 82%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;

  .laglist {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 1rem 0;
    justify-content: space-around;
  }
}
</style>